  <!-- 学科管理 -->
<template>
  <div>
    <div class="question-container">
      <el-card>
        <!-- 搜索 -->
        <el-row>
          <!-- 左 -->
          <el-col :span="18">
            <el-form>
              <el-form-item label="学科名称" size="small" label-width="80px">
                <el-input
                  style="width: 190px"
                  v-model.trim="params.subjectName"
                ></el-input>
              </el-form-item>
              <el-form-item size="small">
                <el-button @click="hClear">清除</el-button>
                <el-button type="primary" @click="init()">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 右 -->
          <el-col :span="6" style="text-align: right">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="add"
            >
              新增学科
            </el-button>
          </el-col>
        </el-row>

        <!-- 警告 -->
        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 20px"
        />

        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#f4f4f5', color: '#606266' }"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="subjectName" label="学科名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column label="创建日期" width="160px">
            <template #default="{ row }">
              {{ FormatDateTime(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template #default="{ row }">
              {{ row.isFrontDisplay ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column label="操作" width="240px">
            <template #default="{ row }">
              <el-button type="text" @click="subjectCatalog(row)"
                >学科分类</el-button
              >
              <el-button type="text" @click="subjectTags(row)"
                >学科标签</el-button
              >
              <el-button type="text" @click="edit(row)">修改</el-button>
              <el-button type="text" @click="del(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <PaginationPage
          :page="params.page"
          :pageSize="params.pagesize"
          :total="counts"
          @pageChange="pageChange"
          @pageSizeChange="pageSizeChange"
        ></PaginationPage>

        <!-- 新增学科 -->
      <SubjectsAdd ref="subjectsAdd" @updateList="init()"></SubjectsAdd>
      </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, remove } from '@/api/hmmm/subjects'
import PaginationPage from '@/module-hmmm/components/pagination-page.vue'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  components: { PaginationPage, SubjectsAdd },
  data () {
    return {
      title: '',
      params: {
        page: 1,
        pagesize: 10,
        subjectName: '' // 学科名
      },
      tableData: [], // 表格信息
      counts: null
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 获取学科列表
    async init () {
      const { data } = await list(this.params)
      // console.log(data)
      this.counts = data.counts
      this.tableData = data.items
    },
    // 页面改变
    pageChange (page) {
      this.params.page = page
      this.init()
    },
    // 条数改变
    pageSizeChange (pagesize) {
      this.params.pagesize = pagesize
      this.init()
    },
    // 格式化时间
    FormatDateTime (t) {
      return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
    },
    // 清除
    hClear () {
      this.params.subjectName = ''
      delete this.params.subjectName
      delete this.params.state
      this.init()
    },
    // 删除学科
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.init()

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 新增
    add () {
      this.$refs.subjectsAdd.showDialog = true
    },
    // 修改
    edit (row) {
      this.$refs.subjectsAdd.showDialog = true
      this.$refs.subjectsAdd.params = { ...row }
    },
    // 学科分类跳转
    async subjectCatalog (row) {
      // 路由传参
      this.$router.push({
        path: 'directorys',
        query: { id: row.id, name: row.subjectName }
      })
    },
    // 学科标签跳转
    async subjectTags (row) {
      // 路由传参
      this.$router.push({
        path: 'tags',
        query: { id: row.id, name: row.subjectName }
      })
    }
  }
}
</script>
<style>
.question-container {
  padding: 0px 10px;
  margin: 10px 0px;
}
.custom-row {
  background-color: #333;
  color: #fff;
}
</style>
<style scoped lang="scss">
::v-deep .el-form-item {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}
el-alert {
  margin-bottom: 15px;
}
</style>
